<template>
  <div class="bg-[#FAF9F9] h-full">
    <div
      class="bg-[url('~/assets/img/commonproblem.png')] bg-no-repeat bg-cover max-lg:p-4 bg-center w-full py-12 flex flex-col justify-center items-center lg:gap-12 gap-4"
    >
      <div
        class="lg:w-[37.5rem] w-full lg:h-[3.5rem] h-[2.5rem] rounded-[1.8125rem] border-[.125rem] has-[:focus]:ring-2 border-solid bg-white gap-[1.25rem] flex items-center px-[1.875rem]"
      >
        <div class="flex-1 flex justify-between gap-[1.25rem] items-center">
          <input
            type="text"
            class="outline-none text-[1rem] flex-1 !bg-transparent text-black"
            :placeholder="$t('formPlaceholder.search')"
            v-model="searchterms"
            @keyup.enter="getSearchsss"
          />
          <span v-if="searchterms.length > 0" class="el-icon-circle-close text-[1.25rem] text-[#999999] flex-none cursor-pointer" @click="emptyyy">
          </span>
        </div>
        <span class="w-[.0625rem] lg:h-[1.5rem] h-4 border-[.0625rem] border-solid border-[#E5E5E5]"> </span>
        <span @click="getSearchsss" class="text-[#999999] el-icon-search text-[1.25rem] cursor-pointer"> </span>
      </div>
    </div>
    <div class="mx-auto max-w-7xl">
      <div class="lg:px-0 lg:py-6 px-4 py-4">
        <div class="grid grid-cols-1 gap-4" v-if="list.data.length !== 0">
          <div class="lg:p-6 flex flex-col gap-4 p-3 bg-white rounded-2xl cursor-pointer" v-for="(i, k) in list.data" :key="k">
            <div class="flex gap-3 justify-between items-center" :class="key == k ? 'text-red-600' : 'text-[#121212]'" @click="openlist(k)">
              <h2 class="font-medium lg:text-[1.13rem] text-[0.88rem] select-none">
                {{ i.title }}
              </h2>
              <svg v-if="key !== k" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="lg:size-5 size-3">
                <path
                  fill-rule="evenodd"
                  d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z"
                  clip-rule="evenodd"
                />
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
                <path
                  fill-rule="evenodd"
                  d="M11.47 7.72a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06L12 9.31l-6.97 6.97a.75.75 0 0 1-1.06-1.06l7.5-7.5Z"
                  clip-rule="evenodd"
                />
              </svg>
            </div>
            <NuxtLink
              class="font-medium lg:text-[1rem] text-[0.75rem] text-[#999999] hover:underline hover:underline-offset-2"
              v-if="key === k"
              :to="{
                path: localePath(`/support/details?id=${i.category_id}&ids=${i.id}`)
              }"
            >
              <div v-html="i.content"></div>
            </NuxtLink>
          </div>
        </div>
        <no-data type="search" v-if="list.data.length == 0" :loading="loading"></no-data>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'newsHome',
    name: 'search',
    data() {
      return {
        //
        key: '', // 当前展开的列表项索引
        // category: [],
        tabList: {}, // 标签列表数据
        query: {}, // 查询参数对象
        total: 0, // 数据总数
        loading: false, // 加载状态
        searchterms: '', // 搜索关键词
        list: {
          data: [] // 搜索结果列表数据
        }
      }
    },
    head: {
      title: 'Support - SEALMG',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: "Discover frequently asked questions on SEALMG's support pages so you can quickly find answers and solutions to your issues."
        }
      ]
    },
    created() {
      this.searchterms = this.$route.query.searchterms
      this.getList()
    },
    watch: {
      searchterms: {
        handler(newVal) {
          // 更新URL参数但不跳转页面
          const newQuery = { ...this.$route.query, searchterms: newVal }
          const newPath = this.$route.path + '?' + new URLSearchParams(newQuery).toString()
          window.history.replaceState({}, '', newPath)
        }
      }
    },
    methods: {
      // 点击搜索图标
      getSearchsss() {
        if (this.searchterms.length == 0) {
          return
        }
        this.getList()
      },
      // 清空搜索框
      emptyyy() {
        this.searchterms = ''
        this.getList()
      },
      // 打开列表
      openlist(k) {
        this.key === k ? (this.key = -1) : (this.key = k)
      },
      // 获取列表
      async getList() {
        this.loading = true
        let res = await this.$axios.get(`/api/cms.article/search?code=qa&keyword=${this.searchterms}`)
        this.list = res
        this.loading = false
      }
    }
  }
</script>
<style lang="less" scoped></style>
